// 九宫格布局
$imgH:20vh;
$border:2px;

@mixin rowMachine($numPerRow,$margin) {
  width: (100% - (($numPerRow - 1) * $margin)) / $numPerRow;
  &:nth-child(n) {
    margin-right: $margin;
    margin-bottom: $margin;
  }
  // 右边
  &:nth-child(#{$numPerRow}n) {
      margin-right: 0;
  }
  // 中间
  &:nth-child(#{$numPerRow}n-1) {
    margin-right:calc(2% - #{$border});
  }
  /*
  设置四个角
  */
  // 第一个
  &:first-child{
    border-top-left-radius: 10px;
  }
  &:nth-child(#{$numPerRow}){
    border-top-right-radius: 10px;
  }
  &:nth-child(#{$numPerRow+1}){
    border-bottom-left-radius: 20%;
  }
  // 最后一个
  &:last-child{
    border-bottom-right-radius: 20%;
  }
}
.ul{
  background-color: #ffffff;
.pic {
  @include rowMachine(3, 2%);
  background: white;
  transition: .6s;
  cursor: pointer;
  float: left;
  height: $imgH;
  text-align: center;
  &:hover{
   box-shadow:2px 2px 5px #333333;
  }
  h3{
    margin:0.2em 0;
  }  
  // @media (max-width: 1000px) {
  //   @include rowMachine(4, 4%);
  // }
  image {
    max-width: 100%; 
    // height: $imgH;
  }
}
// 处于列表的最后一行不设置下底外间距
.last{
  margin-bottom: 0px !important;
}
}